<template>
    <el-affix>
        <MainHeader @tab="tab"/>    
    </el-affix>
    <div style="background-color: #f6f6f6;">
        <div id="profileHead" style="background-color: #f6f6f6;">
        <div id="profileHeadCard">
            <div id="profileHeadUserCover">
                <div>
                    <img :src="pictureError ? 
                    '//images.weserv.nl/?url=150.158.52.191:8080/PersonalBackground/default' + '&poster=' + Math.random(): 
                    '//images.weserv.nl/?url=150.158.52.191:8080/PersonalBackground/' + 
                    this.userInfo.id + '&poster=' + Math.random()" 
                    @error="pictureError = !pictureError"
                    style="width: 100%; height: 240px;"
                    ref="picture">
                </div>
                <el-button id="uploadPictureBtn" @click="upload"><el-icon><Camera /></el-icon>上传封面图片</el-button>
                <input ref="backInput" type="file" accept="image/*" style="display: none" @change="handleBackFileChange($event.target.files)">
            </div>
            <div id="profileHeadUserWrapper">
                <div id="profileHeadUserWrapperMain">
                    <div id="userAvatar">
                        <img :src="avatarError ?
                        '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/default' + '&poster=' + Math.random():
                        '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/' + 
                        this.userInfo.id + '&poster=' + Math.random()" 
                        width="160" height="160"
                        @error="avatarError = !avatarError"
                        @click="avatarInputClick"
                        ref="avatar">
                    </div>
                    <input ref="avatarInput" type="file" accept="image/*" style="display: none" @change="handleAvatarFileChange($event.target.files)">
                    <div id="content">
                        <div style="text-align: left; margin-bottom: 4px;">
                            <el-label class="userName">{{ userInfo.username }}</el-label>
                            <span>
                                <el-icon v-if=" this.userInfo.gender == 'Female' "><Female /></el-icon>
                                <el-icon v-if=" this.userInfo.gender == 'Male' "><Male /></el-icon>
                            </span>
                        </div>
                        <div style="text-align: left">
                            <i>{{ userInfo.simple_desc }}</i>
                        </div>
                        <div id="userFooter">
                            <el-button link @click="userInfoDialogShow"><el-icon><ArrowDown /></el-icon>查看详细资料</el-button>
                            <div id="userFooterEditBtn">
                            <el-button @click="EditPersonalInfo"><el-icon><Edit /></el-icon>编辑个人资料</el-button>
                            <el-button @click="this.$refs.UploadFaceImg.click()">上传人脸图片</el-button>
                            <input type="file" @change="uploadFaceInfo" ref="UploadFaceImg" style="display: none"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="profileMain" style="background-color: #f6f6f6;">
        <div id="profileMain_Main" style="width:694px; background: #fff">
            <el-tabs type="card" @tab-click="tabhandleClick" ref="tabsMain">
            <el-tab-pane :label="'回答 ' + this.answer.answer_answerListCount" name="answer">
                <el-tabs @tab-click="tabhandleClick" model-value="answer.answer_answerList">
                    <el-tab-pane label="我的回答" name="answer.answer_answerList">
                        <el-empty 
                        v-if="answer.answer_answerListCount == 0" 
                        :image-size="300" 
                        description="快去帮助小伙伴解疑答惑吧o(*￣3￣)o" />
                        <div v-for="answer in this.answer.answer_answerList" :key="answer.answer_id">
                            <div class="showListItemInfo" @click="goToQuestionDetail(answer.question_id)">
                                
                                <h2 style="text-align: left; margin-bottom: 8px; margin-top: 5px;">{{ answer.question_title }}</h2>
                                <v-md-preview :text="answer.answer_content" style="text-align: left; margin-bottom: 4px; margin-top: 5px;"/>
                                <!-- <div v-html="this.md.render(answer.answer_content)" style="text-align: left; margin-bottom: 4px; margin-top: 5px;"></div> -->
                                <!-- <h5 style="text-align: left; margin-bottom: 4px; margin-top: 5px;">{{ answer.answer_content }}</h5> -->
                                <div style="font-size: 8px; color: #8590a6; margin-bottom: 5px;">
                                    <span style="padding-right: 10px;">{{ answer.like_count == null ? 0 : answer.like_count }}赞</span>
                                    <span style="padding-right: 10px;">{{ answer.comment_count == null ? 0 : answer.comment_count }}评论</span>
                                    <span>{{ answer.create_time }}</span>
                                </div>
                            </div>
                            <el-divider class="divider"/>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
            <el-tab-pane :label="'提问 ' + this.question.question_questionListCount" name="question">
                <el-tabs @tab-click="tabhandleClick" model-value="question.question_questionList">
                    <el-tab-pane label="我的提问" name="question.question_questionList">
                        <el-empty 
                        v-if="this.question.question_questionListCount == 0" 
                        :image-size="300" 
                        description="未知的问题等待你提出哦￣O￣)ノ" />
                    <div v-for="question in this.question.question_questionList" :key="question.question_id">
                        <div class="showListItemInfo" @click="goToQuestionDetail(question.question_id)">
                            <h2 style="text-align: left; margin-bottom: 8px; margin-top: 5px;">{{ question.question_title }}</h2>
                            <h5 style="text-align: left; margin-bottom: 4px; margin-top: 5px;">{{ question.question_content }}</h5>
                            <div style="font-size: 8px; color: #8590a6; margin-bottom: 5px;">
                                <span style="padding-right: 10px;">{{ question.like_count == null ? 0 : answer.like_count }}赞</span>
                                <span style="padding-right: 10px;">{{ question.follow_count == null ? 0 : answer.comment_count }}收藏</span>
                                <span>{{ question.create_time }}</span>
                            </div>
                        </div>
                        <el-divider class="divider"/>
                    </div>
                    
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
            <el-tab-pane :label="'收藏 ' + this.collection.collection_collectionListCount">
                <el-empty 
                v-if="this.collection.collection_collectionListCount == 0" 
                :image-size="300" 
                description="发现属于自己的宝藏吧(☆▽☆)"/>
                <div 
                v-for="collection in collection.collection_collectionList" 
                :key="collection.collection_id">
                    <div class="showList">
                        <div class="showListItemInfo" @click="goToQuestionDetail(collection.question_id)">
                            <h2 style="text-align: left; margin-bottom: 8px; margin-top: 5px;">{{ collection.question_title }}</h2>
                            <v-md-preview :text="collection.answer_content" style="text-align: left; margin-bottom: 4px; margin-top: 5px;"/>
                            <!-- <div v-html="this.md.render(collection.answer_content)" style="text-align: left; margin-bottom: 4px; margin-top: 5px;"></div> -->
                            <!-- <h5 style="text-align: left; margin-bottom: 4px; margin-top: 5px;">{{ collection.answer_content }}</h5> -->
                            <div style="font-size: 8px; color: #8590a6; margin-bottom: 5px;">
                                <span style="padding-right: 10px;">来自{{ collection.user_id }}</span>
                                <span>{{ collection.create_time }}</span>
                            </div>
                        </div>
                        <div class="followStatusBtn">
                            <el-button @click="cancelCollection(collection)">
                                {{ collection.status == true ? '取消收藏' : '加入收藏' }}
                            </el-button>
                        </div>
                    </div>
                    <el-divider class="divider"/>
                </div>
            </el-tab-pane>
            <el-tab-pane :label="'关注 ' + this.follow.follow_followListCount" name="follow">
                <el-tabs @tab-click="tabhandleClick" model-value="follow">
                    <el-tab-pane :label="'我的关注 ' + this.follow.follow_followListCount" name="follow_followList">
                        <el-empty v-if="this.follow.follow_followListCount == 0" :image-size="300" description="快去发现新朋友吧φ(゜▽゜*)♪"/>
                        <div v-for="follow in follow.follow_followList" :key="follow.id">
                            <div class="showList">
                                <div class="showListItemImage">
                                    <el-image 
                                    :src="follow.avatar ?
                                    '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/default' :
                                    '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/' + follow.id" 
                                    @error="follow.avatar = !follow.avatar"
                                    style="width: 60px; height: 60px; margin-left: 10px;" />
                                </div>
                                <div class="showListItemDesc" @click="gotoPersonalPage(follow.id)">
                                    <h2 style="text-align: left;">{{ follow.username }}</h2>
                                    <div>
                                        <div style="font-size: 8px; color: #8590a6">
                                            <span style="padding-right: 10px;">{{ 0 }}回答</span>
                                            <span style="padding-right: 10px;">{{ 0 }}文章</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="followStatusBtn">
                                    <el-button @click="cancelFollow(follow)">
                                        {{ follow.status == true ? '取消关注' : '加入关注' }}
                                    </el-button>
                                </div>
                            </div>
                        </div>
                        <el-pagination background layout="prev, pager, next" :total=follow.follow_collectionListCount style="margin: 20px 0 10px 10px;"/>
                    </el-tab-pane>
                    <el-tab-pane :label="'关注我的人 ' + this.fan.follow_fansListCount" name="follow_fansList">
                        <el-empty v-if="this.fan.follow_fansListCount == 0" :image-size="300" description="没人关注哭哭/(ㄒoㄒ)/~~"/> 
                        <div v-for="fan in fan.follow_fansList" :key="fan.id">
                            <div class="showList">
                                <div class="showListItemImage">
                                    <el-image 
                                    :src="fan.avatar ?
                                    '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/default' :
                                    '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/' + fan.id" 
                                    @error="follow.avatar = !follow.avatar"
                                    style="width: 60px; height: 60px; margin-left: 10px;"></el-image>
                                </div>
                                <div class="showListItemDesc" @click="gotoPersonalPage(fan.id)">
                                    <h2 style="text-align: left;">{{ fan.username }}</h2>
                                    <div>
                                        <div style="font-size: 8px; color: #8590a6">
                                            <span style="padding-right: 10px;">{{ 0 }}回答</span>
                                            <span style="padding-right: 10px;">{{ 0 }}文章</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="'我关注的话题 ' + this.follow_topic.follow_topicListCount" name="follow_topicList">
                        <el-empty v-if="this.follow_topic.follow_topicListCount == 0" :image-size="300" description="快去发现你喜欢的话题吧(´▽`ʃ♡ƪ)"></el-empty>
                        <div v-for="topic in follow_topic.follow_topicList" :key="topic.id">
                            <div class="showList">
                                <div class="showListItemImage">
                                    <el-image :src="topic.topic_image" style="width: 60px; height: 60px; margin-left: 10px;"></el-image>
                                </div>
                                <div class="showListItemInfo">
                                    <h2 style="text-align: left; margin-bottom: 8px;">{{ topic.topic_name }}</h2>
                                    <div>
                                        <div style="font-size: 8px; color: #8590a6">
                                            <h5 style="padding-right: 10px; text-align: left;">{{ topic.topic_desc }}</h5>
                                            <p>关注数:{{ topic.followed_count == null ? 0 : topic.followed_count }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="followStatusBtn">
                                    <el-button @click="cancelFollowTopic(topic)">
                                        {{ topic.status == true ? '取消关注' : '加入关注' }}
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="'我关注的问题 ' + this.follow_question.follow_questionListCount" name="follow_questionList">
                        <el-empty v-if="this.follow_question.follow_questionListCount == 0" :image-size="300" description="你不是好奇宝宝吗(σ｀д′)σ"></el-empty>
                        <div v-for="question in follow_question.follow_questionList" :key="question.id">
                            <div class="showList">
                                <div class="showListItemInfo">
                                    <h2 style="text-align: left; margin-bottom: 8px;">{{ question.question_title }}</h2>
                                    <div>
                                        <div style="font-size: 8px; color: #8590a6">
                                            <h5 style="padding-right: 10px; text-align: left;">{{ question.question_content }}</h5>
                                            <span style="padding-right: 10px;">关注数:{{ question.followed_count == null ? 0 : question.followed_count }}</span>
                                            <span>{{ question.create_time }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="followStatusBtn">
                                    <el-button @click="cancelFollowQuestion(question)">
                                        {{ question.status == true ? '取消关注' : '加入关注' }}
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
        </el-tabs>
        </div>

        <div id="profileMain_Side" style="background: #fff">
            <div>
                <div>
                    <div id="creatorCart">
                        <div style="width: 262px;">
                            <div id="creatorHint">
                                <el-icon><EditPen /></el-icon>
                                <div id="creatorCenter">创作中心</div>
                            <a>草稿箱{{ '(' + draftNumber + ')' }}</a>
                            </div>
                        </div>
                        <div>
                            <div id="creatorContent">
                            <div>
                                <div id="creatorDesc">
                                    <div id="creatorDescTittle">开启你的kehoo创作之旅</div>
                                    <div id="creatorDescContext">发布首篇内容，开通创作中心 快来成为kehoo创作者吧～</div>
                                </div>
                                </div>
                            </div>
                            <a href="#/mainPage">
                                <div id="goToCreatLink">
                                    <span><el-icon><Plus /></el-icon></span>
                                    开始创作
                                </div>
                            </a>
                        </div>
                    </div>
                    <div id="followShip">
                        <a type="button" class="followShipBtn">
                            <div>
                                <div class="followShipItem">关注数</div>
                                <div class="followShipNumber">{{ follow.follow_followListCount }}</div>
                            </div>
                        </a>
                        <el-divider direction="vertical" style="height: auto;"/>
                        <a type="button" class="followShipBtn">
                            <div>
                                <div class="followShipItem">粉丝数</div>
                                <div class="followShipNumber">{{ fan.follow_fansListCount }}</div>
                            </div>
                        </a>
                    </div>
                    <div id="followList">
                        <el-link class="followListLink" :underline="false">
                            <span class="followListLinkName">关注的话题</span>
                            <span class="followListLinkValue" style="margin-right: 5px;">{{ follow_topic.follow_topicListCount }}</span>
                        </el-link>
                        <el-link class="followListLink" :underline="false">
                            <span class="followListLinkName">关注的问题</span>
                            <span class="followListLinkValue" style="margin-right: 5px;">{{ follow_question.follow_questionListCount }}</span>
                        </el-link>
                    </div>
                    <div>
                        <el-link></el-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>



    <el-dialog v-model="dialogFromVisable" title="个人信息" fullscreen :centered="true">
        <div class="dialogContent">
            <el-form :model="this.userInfoCopy" label-width="100px" style="width : 500px" >
                <el-form-item label="用户名">
                    <el-input v-model="this.userInfoCopy.username" />
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-text>{{ this.userInfoCopy.email }}</el-text>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="this.userInfoCopy.gender" class="ml-4">
                        <el-radio :label="1" size="large">女</el-radio>
                        <el-radio :label="2" size="large">男</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="住址">
                    <el-input v-model="this.userInfoCopy.position" maxlength="100" show-word-limit :rows="2" type="textarea" resize="none" placeholder="好想见你o(*////▽////*)q"></el-input>
                </el-form-item>
                <el-form-item label="职业">
                    <el-input v-model="this.userInfoCopy.career" maxlength="100" show-word-limit placeholder="360行,行行出状元( •̀ ω •́ )y"></el-input>
                </el-form-item>
                <el-form-item label="教育程度">
                    <el-input v-model="this.userInfoCopy.education" maxlength="100" show-word-limit placeholder="好怀念母校啊(。_。)"></el-input>
                </el-form-item>
                <el-form-item label="简要描述">
                    <el-input v-model="this.userInfoCopy.simple_desc" maxlength="50" show-word-limit :rows="2" type="textarea" resize="none" placeholder="第一印象是什么呢Hi~ o(*￣▽￣*)ブ"></el-input>
                </el-form-item>
                <el-form-item label="详细描述">
                    <el-input v-model="this.userInfoCopy.full_desc" maxlength="300" show-word-limit :rows="5" type="textarea" resize="none" placeholder="想对你有更深入的了解呢ヾ(≧∇≦*)ゝ"></el-input>
                </el-form-item>      
            </el-form>
            <div>
                <el-button @click="editPasswordDialog = true">修改密码</el-button>
                <el-button @click="editEnsure">提交修改</el-button>
                <el-button @click="editCancel">取消</el-button>
            </div>
        </div>
    </el-dialog>

    <el-dialog v-model="editPasswordDialog" title="修改密码">
        <el-tabs>
            <el-tab-pane label="使用邮箱验证码修改密码">
                <el-form :rules="rules" ref="ruleForm" :model="changePasswordByEmail">
                    <el-form-item label="邮箱" prop="email">
                        <el-input 
                            placeholder="请输入邮箱" 
                            v-model="changePasswordByEmail.email"
                            :prefix-icon="Message"/>
                        <el-text @click="getVCode" class="getCode">{{ getVCodeText }}</el-text>
                    </el-form-item>
                    <el-form-item label="验证码" v-show="this.changePasswordByEmail.status == true">
                        <el-input 
                        placeholder="请输入验证码" 
                        v-model="changePasswordByEmail.code" />
                    </el-form-item>
                    <el-form-item label="新密码" >
                        <el-input 
                        placeholder="请输入新密码" 
                        v-model="changePasswordByEmail.newPassword" />
                    </el-form-item>
                    <div>
                        <el-button @click="changePasswordByEmailClick">确认提交</el-button>
                    </div>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="使用旧密码修改密码">
                <el-form 
                :model="this.changePasswordByPassword" 
                :rules="rules1"
                :ref="ruleForm1">
                    <el-form-item label="旧密码" prop="oldPassword">
                        <el-input 
                        placeholder="请输入旧密码" 
                        :prefix-icon="Lock"
                        v-model="changePasswordByPassword.oldPassword" />
                    </el-form-item>
                    <el-form-item label="新密码" prop="password">
                        <el-input 
                        placeholder="请输入新密码" 
                        :prefix-icon="Lock"
                        v-model="changePasswordByPassword.newPassword" />
                    </el-form-item>
                    <el-form-item label="确认新密码" prop="pwd2">
                        <el-input 
                        placeholder="请再次输入新密码" 
                        :prefix-icon="Lock"
                        v-model="changePasswordByPassword.newPasswordTwice" />
                    </el-form-item>
                    <div>
                        <el-button @click="changePasswordByPasswordClick">确认提交</el-button>
                    </div>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>

    <el-dialog v-model="infoDialogFromVisable" title="个人信息">
        <div class="dialogContent">
            <el-form :model="this.userInfo" label-width="100px" style="width : 500px" >
                <el-form-item label="用户名">
                    <el-text style="text-align: center;">{{ this.userInfo.username }}</el-text>
                </el-form-item>
                <el-form-item label="邮箱" class="fromItem">
                    <el-text>{{ this.userInfo.email }}</el-text>
                </el-form-item>
                <el-form-item label="性别" class="fromItem">
                    <el-text>{{ this.userInfo.gender == 1 ? "女" : "男" }}</el-text>
                </el-form-item>
                <el-form-item label="住址" class="fromItem">
                    <el-text>{{ this.userInfo.position == null ? "暂无" : this.userInfo.position }}</el-text>
                </el-form-item>
                <el-form-item label="职业" class="fromItem">
                    <el-text>{{ this.userInfo.career == null ? "暂无" : this.userInfo.career }}</el-text>
                </el-form-item>
                <el-form-item label="教育程度" class="fromItem">
                    <el-text>{{ this.userInfo.education == null ? "暂无" : this.userInfo.education }}</el-text>
                </el-form-item>
                <el-form-item label="简要描述" class="fromItem">
                    <el-text>{{ this.userInfo.simple_desc == null ? "暂无" : this.userInfo.simple_desc }}</el-text>
                </el-form-item>
                <el-form-item label="详细描述" class="fromItem">
                    <el-text>{{ this.userInfo.full_desc == null ? "暂无" : this.userInfo.full_desc }}</el-text>
                </el-form-item>      
            </el-form>
        </div>
    </el-dialog>
</template>

<script>
import axios from 'axios'
import { ref } from 'vue'
import { ElNotification, ElMessageBox } from 'element-plus'
import $ from "jquery";
import { useRouter } from "vue-router";
import MarkdownIt from 'markdown-it';

export default {
    data(){
        let validatePwd1 = (rule, value, callback) => {
            if (this.changePasswordByPassword.newPassword === "") {
                return callback(new Error("请输入密码"));
            }
            // 长度在6-18之间,允许字母数字和下划线
            const passwordRule = /^\w{6,18}$/;
            if (passwordRule.test(this.changePasswordByPassword.newPassword)) {
                return callback();
            } else {
                return callback(
                    new Error("长度6-18之间,允许字母数字和下划线")
                );
            }
        };

        let validatePwd2 = (rule, value, callback) => {
            if (this.changePasswordByPassword.newPasswordTwice === "") {
                return callback(new Error("请确认密码"));
            }
            if (this.changePasswordByPassword.newPasswordTwice == this.changePasswordByPassword.newPassword) {
                return callback();
            } else {
                return callback(
                    new Error("两次输入密码不一致!")
                );
            }
        };

        let validateEmail = (rule, value, callback) => {
            if (value === "") {
                return callback(new Error("请输入邮箱"));
            }
            const emailRule = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
            if (emailRule.test(value)) {
                if(value != this.userInfo.email){
                    return callback(new Error("邮箱输入错误，请仔细核对"));
                }else{
                    return callback()
                }
            }else {
                return callback(new Error("请输入正确的邮箱格式!"));
            }
        };

        let validateOldPwd = (rule, value, callback) => {
            if (this.changePasswordByPassword.oldPassword === "") {
                return callback(new Error("请输入密码"));
            }

            console.log(this.changePasswordByPassword.oldPassword)
            // 长度在6-18之间,允许字母数字和下划线
            const passwordRule = /^\w{6,18}$/;
            if (passwordRule.test(this.changePasswordByPassword.oldPassword)) {
                console.log("1111111111111111111111111")
                this.$axios
                    .get(`${this.$target}/user/password?user_id=` + this.userInfo.id + "&password=" + this.userInfo.password)
                    .then(respone => {
                        if(respone.data.data == false){
                            return callback(
                                new Error("旧密码错误，请重新输入")
                            )
                        }else{
                            return callback()
                        }
                    })
            } else {
                return callback(
                    new Error("长度6-18之间,允许字母数字和下划线")
                );
            }
        };
        return{
            userInfo : {},
            follow : {
                follow_followList : [], //用户关注列表
                follow_followListCount : 0, //用户关注数
            },
            fan : {
                follow_fansList : [], //粉丝列表
                follow_fansListCount : 0,   //粉丝数
            },
            follow_question : {
                follow_questionList : [],   //关注提问列表
                follow_questionListCount : 0,   //关注问题数量
            },
            follow_collection : {
                follow_collectionList : [], //关注收藏列表
                follow_collectionListCount : 0, //关注收藏数量
            },
            follow_topic : {
                follow_topicList : [],
                follow_topicListCount : 0,
            },
            question : {
                question_questionList : [],   //提问列表
                question_questionListCount : 0, //提问数量
            },
            answer : {
                answer_answerList : [], //回答列表
                answer_answerListCount : 0, //回答数量
            },
            collection : {
                collection_collectionList : [],
                collection_collectionListCount : 0,
            },
            draftNumber: 0, //草稿数量
            dialogFromVisable : ref(false),
            editPasswordDialog : ref(false),
            changePasswordByEmail : {
                newPassword : "",
                email : "",
                code : "",
                status : false
            },
            counting : false,
            getVCodeText : "获取验证码",
            rules : {
                email: [{ validator: validateEmail, trigger: "blur" }],
            },
            rules1: {
                password: [{ validator: validatePwd1, trigger: "blur" }],
                pwd2: [{ validator: validatePwd2, trigger: "blur" }],
                oldPassword: [{ validator: validateOldPwd, trigger: "blur" }]
            },
            userInfoCopy : {},
            changePasswordByPassword : {
                newPassword : "",
                oldPassword : "",
                newPasswordTwice : "",
            },
            avatarError : false,
            pictureError : false,
            router : useRouter(),
            md : new MarkdownIt(),
            infoDialogFromVisable : false,
        }
    },
    activated(){
        console.log("1");
        this.getPersonalInfo()
    },
    methods:{
        getPersonalInfo(){
            //从本地得到用户数据信息
            this.userInfo = JSON.parse(localStorage.getItem("user"))
            console.log(this.userInfo.id)

            axios.get(`${this.$target}/user/`+ this.userInfo.id + "/info")
            .then(respone => {
                this.userInfo = respone.data.data
            })
            .catch(error => {
                ElNotification({
                    title:"错误",
                    type:"error",
                    message:"获取用户信息失败"
                })
                console.log("获取用户信息失败" + error)
            })


            //获取用户关注数
            axios.get(`${this.$target}/follow/count?user_id=` + this.userInfo.id + "&type=0")
            .then(respone => {
                this.follow.follow_followListCount = respone.data.data
            })
            .catch(error => {
                ElNotification({
                    title:"错误",
                    type:"error",
                    message:"获取用户关注数失败"
                })
                console.log( "获取用户关注数失败" + error)
            })

            //获取用户粉丝数
            axios.get(`${this.$target}/follow/fans/count?id=` + this.userInfo.id + "&type=0")
            .then(respone => {
                this.fan.follow_fansListCount = respone.data.data
            })
            .catch(error => {
                ElNotification({
                    title:"错误",
                    type:"error",
                    message:"获取用户粉丝数失败"
                })
                console.log( "获取用户粉丝数失败" + error)
            })

            //获取用户回答列表和数量
            axios.get(`${this.$target}/answer/user_id?user_id=` + this.userInfo.id)
            .then(respone => {
                this.answer.answer_answerList = respone.data.data
                this.answer.answer_answerListCount = this.answer.answer_answerList.length

                for(var i=0;i<this.answer.answer_answerListCount;i++){
                    axios.get(`${this.$target}/question/detail?question_id=` + this.answer.answer_answerList[i].question_id)
                    .then(respone => {       
                        for(var i=0;i<this.answer.answer_answerListCount;i++){
                            if(this.answer.answer_answerList[i].answer_id == respone.data.data.answer_id){
                                this.answer.answer_answerList[i].question_title = respone.data.data.question_title
                                break
                            }
                        }
                    })
                    .catch(error => {
                        ElNotification({
                            title:"错误",
                            type:"error",
                            message:"获取用户回答问题标题失败"
                        })
                        console.log("获取用户回答问题标题失败" + error)
                    })
                }
            })
            .catch(error => {
                ElNotification({
                    title:"错误",
                    type:"error",
                    message:"获取用户回答失败"
                })
                console.log("获取用户回答失败" + error)
            })

            //获取用户提问列表和数量
            axios.get(`${this.$target}/question/user_id?user_id=` + this.userInfo.id)
            .then(respone => {
                this.question.question_questionList = respone.data.data
                this.question.question_questionListCount = this.question.question_questionList.length
            })
            .catch(error => {
                ElNotification({
                    title:"错误",
                    type:"error",
                    message:"获取用户提问失败"
                })
                console.log("获取用户提问失败" + error)
            })

            //获取用户关注问题列表和数量
            axios.get(`${this.$target}/follow?user_id=` + this.userInfo.id +"&type=1")
            .then(respone => {
                this.follow_question.follow_questionList = respone.data.data.questionList
                if(respone.data.data.questionList == undefined)
                {
                    this.follow_question.follow_questionListCount = 0
                }else{
                    this.follow_question.follow_questionListCount = respone.data.data.questionList.length
                }
                
                for(var i=0;i<this.follow_question.follow_questionListCount;i++){
                    this.follow_question.follow_questionList[i].status = true;
                }
            })
            .catch(error => {
                ElNotification({
                    title:"错误",
                    type:"error",
                    message:"获取用户问题列表失败"
                })
                console.log("获取用户关注问题列表失败" + error)
            })

            //获取用户关注话题列表和数量
            axios.get(`${this.$target}/follow?user_id=` + this.userInfo.id +"&type=2")
            .then(respone => {
                this.follow_topic.follow_topicList = respone.data.data.topicList
                if(respone.data.data.topicList == undefined){
                    this.follow_topic.follow_topicListCount = 0
                }else{
                    this.follow_topic.follow_topicListCount = respone.data.data.topicList.length
                }
                for(var i=0;i<this.follow_topic.follow_topicListCount;i++){
                    this.follow_topic.follow_topicList[i].status = true
                }
            })
            .catch(error => {
                ElNotification({
                    title:"错误",
                    type:"error",
                    message:"获取用户关注话题列表失败"
                })
                console.log("获取用户关注话题列表失败" + error)
            })

            //获取用户收藏数
            axios.get(`${this.$target}/collection?user_id=` + this.userInfo.id)
            .then(respone => {
                this.collection.collection_collectionList = respone.data.data
                this.collection.collection_collectionListCount = respone.data.data.length
                for(var i=0;i<this.collection.collection_collectionListCount;i++){
                    this.collection.collection_collectionList[i].status = true;
                }           
            })
            .catch(error => {
                ElNotification({
                    title: '错误',
                    message: '获取用户收藏失败',
                    type: 'error',
                })
            })
        },
        tabhandleClick(tab,event){
            switch(tab.props.name){
                case "follow_followList":{
                    //获取关注列表并展示
                    axios.get("http://127.0.0.1:8080/follow?user_id=" + this.userInfo.id + "&type=0")
                    .then(respone => {
                        this.follow.follow_followList = respone.data.data.userList
                        for(var i=0;i<this.follow.follow_followListCount;i++){
                            this.follow.follow_followList[i].status = true
                            this.follow.follow_followList[i].avatar = false
                        }
                        console.log(this.follow.follow_followList)
                    })
                    .catch(error => {
                        ElNotification({
                            title: '错误',
                            message: '获取关注列表失败',
                            type: 'error',
                        })
                        console.log("获取关注列表失败" + error)
                    })
                };break;
                case "follow_fansList":{
                    //获取粉丝列表并展示
                    axios.get("http://127.0.0.1:8080/follow/fans?id=" + this.userInfo.id)
                    .then(respone => {
                        this.fan.follow_fansList = respone.data.data
                        for(var i=0;i<this.fan.follow_fansListCount;i++){
                            this.fan.follow_fansList[i].avatar = false
                        }
                    })
                    .catch(error => {
                        ElNotification({
                            title: '错误',
                            message: '获取粉丝列表失败',
                            type: 'error',
                        })
                        console.log("获取粉丝列表失败" + error)
                    })
                };break;
                default:{
                    console.log("无")
                }
            }
        },
        cancelFollow(follow){
            if(follow.status === false){
                //取消取消关注
                axios.post(`${this.$target}/follow?from_id=` + this.userInfo.id + "&to_id=" + follow.id + "&type=0")
                .then(respone => {
                    follow.status = true
                    ElNotification({
                        title: '成功',
                        message: '关注成功',
                        type: 'success',
                    })
                    console.log("取消取消关注成功" + respone)
                })
                .catch(error => {
                    ElNotification({
                        title: '错误',
                        message: '关注失败，请稍后再试',
                        type: 'error',
                    })
                    console.log("取消取消关注失败" + error)
                })
            }else{
                //取消关注
                axios.delete(`${this.$target}/follow?from_id=` + this.userInfo.id + "&to_id=" + follow.id + "&type=0")
                .then(respone => {
                    follow.status = false
                    ElNotification({
                        title: '成功',
                        message: '取消关注成功',
                        type: 'success',
                    })
                    console.log("取消关注成功" + respone)
                })
                .catch(error => {
                    ElNotification({
                        title: '错误',
                        message: '取消关注失败,请稍后再试',
                        type: 'error',
                    })
                    console.log("取消关注失败" + error)
                })
            }
        },
        cancelFollowQuestion(question){
            if(question.status === false){
                //取消取消关注
                axios.post(`${this.$target}/follow?from_id=` + this.userInfo.id + "&to_id=" + question.question_id + "&type=1")
                .then(respone => {
                    question.status = true
                    ElNotification({
                        title: '成功',
                        message: '关注成功',
                        type: 'success',
                    })
                    console.log("取消取消关注问题成功" + respone)
                })
                .catch(error => {
                    ElNotification({
                        title: '错误',
                        message: '关注失败,请稍后再试',
                        type: 'error',
                    })
                    console.log("取消取消关注问题失败" + error)
                })
            }else{
                //取消关注
                axios.delete(`${this.$target}/follow?from_id=` + this.userInfo.id + "&to_id=" + question.question_id + "&type=1")
                .then(respone => {
                    question.status = false
                    ElNotification({
                        title: '成功',
                        message: '取消关注成功',
                        type: 'success',
                    })
                    console.log("取消关注问题成功" + respone)
                })
                .catch(error => {
                    ElNotification({
                        title: '错误',
                        message: '取消关注失败,请稍后再试',
                        type: 'error',
                    })
                    console.log("取消关注问题失败" + error)
                })
            }
        },
        cancelFollowTopic(topic){
            if(topic.status === false){
                //取消取消关注
                axios.post(`${this.$target}/follow?from_id=` + this.userInfo.id + "&to_id=" + topic.topic_id + "&type=2")
                .then(respone => {
                    topic.status = true
                    ElNotification({
                        title: '成功',
                        message: '关注成功',
                        type: 'success',
                    })
                    console.log("取消取消关注问题成功" + respone)
                })
                .catch(error => {
                    ElNotification({
                        title: '错误',
                        message: '关注失败,请稍后再试',
                        type: 'error',
                    })
                    console.log("取消取消关注问题失败" + error)
                })
            }else{
                //取消关注
                axios.delete(`${this.$target}/follow?from_id=` + this.userInfo.id + "&to_id=" + topic.topic_id + "&type=2")
                .then(respone => {
                    topic.status = false
                    ElNotification({
                        title: '成功',
                        message: '取消关注成功',
                        type: 'success',
                    })
                    console.log("取消关注问题成功" + respone)
                })
                .catch(error => {
                    ElNotification({
                        title: '错误',
                        message: '取消关注失败,请稍后再试',
                        type: 'error',
                    })
                    console.log("取消关注问题失败" + error)
                })
            }
        },
        EditPersonalInfo(){    
            this.userInfoCopy = JSON.parse(JSON.stringify(this.userInfo))
            this.dialogFromVisable = true;
        },
        getVCode(){
            if(!this.counting){
                this.$refs["ruleForm"].validateField('email', valid => {
                    if (valid) {
                        this.$axios
                            .get(`${this.$target}/user/email/code?email=` + this.changePasswordByEmail.email)
                            .then(res => {
                                this.notifySucceed("成功发送验证码!")
                                this.changePasswordByEmail.status = true
                                localStorage.setItem("EmailToken", res.data)
                                this.counting = true
                                let count = 60
                                let interval = setInterval(() => {
                                    if (count >= 10) {
                                        this.getVCodeText = "" + count
                                    } else if (count != 0) {
                                        this.getVCodeText = "0" + count
                                    } else {
                                        this.getVCodeText = "获取验证码"
                                        this.counting = false
                                        clearInterval(interval)
                                    }
                                    count--
                                }, 1000)
                            })
                    }else{
                        this.notifyError("请输入正确的邮箱格式!")
                    }
                })
            }else{
                this.notifyError("等待计时结束后重试!")
            }
        },
        changePasswordByEmailClick(){
            this.$refs["ruleForm"].validate(valid=>{
                if(valid){
                    if(this.changePasswordByEmail.status){
                        this.$axios
                        .get(`${this.$target}/user/email/verify?token=`+localStorage.getItem("EmailToken")+`&code=`+this.changePasswordByEmail.code)
                        .then(res=>{
                        if(res.data){
                            console.log(this.userInfo.id)
                            this.$axios
                                .patch(`${this.$target}/user/password/`+this.changePasswordByEmail.email + `?user_id=` + this.userInfo.id
                                        + `&password=` + this.changePasswordByEmail.newPassword
                                        + `&token=` + localStorage.getItem("EmailToken")
                                        + `&code=` + this.changePasswordByEmail.code)
                                .then(res=>{
                                    if(res.data){
                                        this.notifySucceed("密码修改成功!")
                                        this.$refs["ruleForm"].resetFields();
                                        this.dialogFromVisable = false
                                    }else{
                                        this.notifyError("密码修改失败!")
                                    }
                                })
                        }else{
                            this.notifyError("验证码错误!")
                        }
                        })
                    }else{
                        this.notifyError("请先填写邮箱!")
                        return
                    }

                }else{
                    return
                }
            })
        },
        editEnsure(){
            ElMessageBox.confirm(
                '你确定要修改信息吗?',
                'Warning',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(() => {
                console.log(this.userInfoCopy)
                if(this.userInfo != this.userInfoCopy){
                this.$axios
                .patch(`${this.$target}/user`, {
                        "id" : this.userInfoCopy.id,
                        "username" : this.userInfoCopy.username,
                        "gender" : this.userInfoCopy.gender,
                        "position" : this.userInfoCopy.position,
                        "career" : this.userInfoCopy.career,
                        "education" : this.userInfoCopy.education,
                        "simple_desc" : this.userInfoCopy.simple_desc,
                        "full_desc" : this.userInfoCopy.full_desc
                })
                .then(respone => {
                    console.log(respone.data.data)
                    if(respone.data.data == true){
                        ElNotification({
                            title:"Success",
                            message:"修改成功",
                            type:"success"
                        })
                        this.userInfo.username = this.userInfoCopy.username
                        this.userInfo.gender = this.userInfoCopy.gender
                        this.userInfo.position =this.userInfoCopy.position
                        this.userInfo.career =this.userInfoCopy.career
                        this.userInfo.education =this.userInfoCopy.education
                        this.userInfo.simple_desc =this.userInfoCopy.simple_desc
                        this.userInfo.full_desc =this.userInfoCopy.full_desc
                        location.reload()
                    }else{
                        ElNotification({
                            title:"Error",
                            message:"修改失败",
                            type:"error"
                        })
                    }
                })
                .catch(error => {
                    ElNotification({
                            title:"Error",
                            message:"网络波动，请稍后再试",
                            type:"error"
                        })
                })
                }
            })
            this.dialogFromVisable = false;
        },
        changePasswordByPasswordClick(){
            console.log(this.changePasswordByPassword)
            this.$refs["ruleForm1"].validate(valid => {
                if(valid){
                    this.$axios
                        .patch(`${this.$target}/user/password?user_id=` + this.userInfo.id + "&password=" + this.changePasswordByPassword.newPassword)
                        .then(respone => {
                            if(respone.data.data == true){
                                ElNotification({
                                    title:"Success",
                                    message:"密码修改成功",
                                    type:"success"
                                })
                            }else{
                                ElNotification({
                                    title:"Error",
                                    message:"密码修改失败",
                                    type:"error"
                                })
                            }
                        })
                        .catch(error => {
                            ElNotification({
                            title:"Error",
                            message:"网络波动，请稍后再试",
                            type:"error"
                        })
                        })
                }
            })
        },
        cancelCollection(collection){
            if(collection.status === false){
                //取消取消收藏
                axios.post(`${this.$target}/collection?user_id=` + this.userInfo.id + "&answer_id=" + collection.answer_id)
                .then(respone => {
                    collection.status = true
                    ElNotification({
                        title: '成功',
                        message: '收藏成功',
                        type: 'success',
                    })
                })
                .catch(error => {
                    ElNotification({
                        title: '错误',
                        message: '收藏失败',
                        type: 'error',
                    })
                })
            }else{
                //取消收藏
                axios.delete(`${this.$target}/collection?collection_id=` + collection.collection_id)
                .then(respone => {
                    collection.status = false
                    ElNotification({
                        title: '成功',
                        message: '取消收藏成功',
                        type: 'success',
                    })
                })
                .catch(error => {
                    console.log("取消收藏失败" + error)
                    ElNotification({
                        title: '错误',
                        message: '取消收藏失败',
                        type: 'error',
                    })
                })
            }
        },
        avatarInputClick(){
            this.$refs.avatarInput.click();
        },
        handleAvatarFileChange(files){
            let data = new FormData();
            console.log(files[0])
            data.append("img", files[0]);
            data.append("type", "h");
            data.append("id", this.userInfo.id);
            $.ajax({
                type: "post",
                async: false,
                url: "http://150.158.52.191:8081/ReceivePicture",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: "json",
                success: function (resp) {
                    location.reload()
                },
                error: function (errorMsg) {
                    ElNotification({
                        title:"错误",
                        type:"error",
                        message:"网络波动，请稍后再试"
                    })
                    console.log(errorMsg);
                },
            });
        },
        uploadFaceInfo(e) {
            let file=e.target.files[0]
            let reader=new FileReader()
            reader.readAsDataURL(file)
            reader.onload=function(e){
            let base=this.result.split("base64,")[1];
            $.ajax({
                type:"post",
                url:"http://localhost:8080/faceRegister",
                data:{"base":base,"id":localStorage.getItem("userID")},
                dataType: "json",
                success:(res)=>{
                    if(res.error_msg=="SUCCESS"){
                        this.notifySucceed("上传成功!")
                    }else{
                        this.notifyError("上传失败!")
                    }
                }
            });
            }
        },
        upload(){
            this.$refs.backInput.click();
        },
        handleBackFileChange(files){
            let data = new FormData();
            data.append("img", files[0]);
            data.append("type", "b");
            data.append("id", this.userInfo.id);
            $.ajax({
                type: "post",
                async: false,
                url: "http://150.158.52.191:8081/ReceivePicture",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: "json",
                success: function (resp) {
                    location.reload()
                },
                error: function (errorMsg) {
                    ElNotification({
                        title:"错误",
                        type:"error",
                        message:"网络波动，请稍后再试"
                    })
                    console.log(errorMsg);
                },
            });
        },
        goToQuestionDetail(id){
            let page = this.router.resolve({
                path: "/QuestionDetail",
                query: {
                    question_id: id,
                },
            });
            window.open(page.href, "_blank");
        },
        gotoPersonalPage(id){
            let page = this.router.resolve({
                path: "/Other",
                query: {
                    user_id: id,
                },
            });
            window.open(page.href, "_blank");
        },
        tab(){

        },
        userInfoDialogShow(){
            console.log("1111")
            this.infoDialogFromVisable = true
        }
    } 
}
</script>

<style>
#profileHeadCard {
    width: 1000px;
    margin: 0 auto;
    padding-bottom: 10px;
    background-color: #fff;
}

#profileHeadUserCover{
    position: relative;
}

#uploadPictureBtn {
    position: absolute;
    right: 24px;
    top: 20px;
    z-index: 2;
    background-color: transparent;
}

#userAvatar {
    left: 0;
    position: absolute;
    top: -65px;
    z-index: 1;
    border: 4px solid #fff;
    width: 160px;
    height: 160px;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

#content{
    border-left: 164px solid transparent;
    padding-left: 32px;
    padding-top: 16px;
}

.userName {
    font-size: 32px;
    font-weight: bold;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    position: relative;
}

#profileHeadUserWrapper{
    position: relative;
}

#profileHeadUserWrapperMain{
    margin: 0 20px 24px;
    position: relative;
}

#userFooter{
    text-align: left;
    padding-top: 16px;
    position: relative;
}

#userFooterEditBtn{
    bottom: 0;
    position: absolute;
    right: 0;
}

#profileMain{
    margin: 10px auto;
    min-height: 100vh;
    padding: 25px 16px;
    width: 1000px;
    justify-content: space-between;
    display: flex;
    align-items: flex-start;
}

#creatorCart{
    margin-bottom: 50px;
    display: flex;
    width: 100%;
    align-items: center;

    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: relative;
}

#creatorHint{
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%;
    display: flex;
    margin: 10px 5px 10px 5px;
}

#creatorCenter{
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    flex-grow: 1;
    line-height: 16px;
    margin-left: 4px;
    text-align: left;
}

#creatorContent{
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    width: 262px;
    -webkit-box-align: center;
    align-items: center;
    height: 98px;
    padding-left: 14px;
    padding-right: 14px;
    display: flex;
    background: rgba(133, 144, 166, 0.05);
    border-radius: 4px;
}

#creatorDesc{
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    flex: 1 1 0%;
}

#creatorDescTittle{
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    font-size: 15px;
    line-height: 21px;
    color: rgb(68, 68, 68);
}

#creatorDescContext{
    box-sizing: border-box;
    margin: 6px 0px 0px;
    min-width: 0px;
    font-size: 12px;
    color: rgb(153, 153, 153);
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
}

#goToCreatLink{
    box-sizing: border-box;
    margin: 10px 0px 18px;
    min-width: 0px;
    justify-content: center;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    border: 1px solid rgba(5, 109, 232, 0.5);
    color: rgb(5, 109, 232);
    border-radius: 4px;
    cursor: pointer;
    height: 40px;
    font-size: 14px;
}

#followShip{
    display: flex;
}

.followShipBtn{
    flex: 1 1;
}

.followShipItem{
    font-size: 14px;
    color: #8590a6;
    line-height: 1.6;
}

.followShipNumber{
    font-weight: 600;
    color: #121212;
    font-size: 18px;
    line-height: 1.6
}

#followList{
    padding-top: 10px;
}

.followListLink{
    display: flex;
    font-size: 14px;
    height: 46px;
    padding-left: 5px;
}

.followListLinkName{
    flex-grow: 1;
    width: 260px;
    text-align: left
}

.followListLinkValue{

}

#collectCreatBtn{
    border: none;
}

.showList{
    position: relative; 
    display: flex; 
    margin-top: 10px;
}

.showListItemImage{
    float: left; 
    margin-right: 16px; 
    display: flex; 
    align-items: center;
}

.showListItemDesc{
    flex: 1 1; 
    margin-right: 6px; 
    overflow: hidden; 
    text-align: left;
}

.showListItemInfo{
    flex: 1 1; 
    margin-right: 6px; 
    overflow: hidden; 
    text-align: left;
    margin-left: 5px;
}

.followStatusBtn{
    align-items: center; 
    position: relative; 
    display: flex; 
    margin-right: 15px;
}

.dialogContent{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
}

.divider{
    margin-top: 5px;
    margin-bottom: 5px;
}

.getCode {
        position: absolute;
        right: 28px;
        font-weight: bold;
        cursor: pointer;
}

.formItem{
    flex: 1;
    line-height: 32px;
}
</style>
